<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="公寓名称" prop="flatName">
        <el-input v-model="ruleForm.flatName" placeholder="公寓名称" />
      </el-form-item>

      <el-form-item label="楼盘名称">
        <el-input v-model="ruleForm.premisesId" placeholder="请选择"></el-input>
<!--        <el-select v-model="ruleForm.premisesId" filterable placeholder="请选择">
          <el-option
            v-for="item in premises"
            :key="item.id"
            :label="item.name"
            :value="item.id">{{item.name}}
          </el-option>
        </el-select>-->
        <el-button type="warning" @click="opengotoloupan">添加楼盘</el-button>

      </el-form-item>
      <el-form-item label="公共配套" prop="ggids">
        <el-checkbox-group v-model="ruleForm.ggids">
          <el-checkbox
            v-for="item in pubss"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          >{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="公共区域图片">
        <el-upload
          action="http://localhost:8200/hou/upload/pic"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handleAvatarSuccess"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-input v-model="ruleForm.imageUrl" hidden />
      </el-form-item>

      <el-form-item label="付款方式">
        押
        <el-select v-model="ruleForm.paymentMortgage" placeholder="押">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="1" />
          <el-option label="3" value="3" />
        </el-select>
        付
        <el-select v-model="ruleForm.paymentPay" placeholder="付">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
        </el-select>
      </el-form-item>

      <el-form-item label="户型">
        室
        <el-select v-model="ruleForm.room" placeholder="室">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
          <el-option label="9" value="9" />
        </el-select>
        厅
        <el-select v-model="ruleForm.hall" placeholder="厅">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="公共装修情况">
        <el-select v-model="ruleForm.decorate" placeholder="公共装修情况">
          <el-option label="精装" value="0" />
          <el-option label="简装" value="1" />
          <el-option label="毛坯" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="设置管家">
        <el-select v-model="ruleForm.manager" placeholder="设置管家">
          <el-option
            v-for="item in user"
            :key="item.userId"
            :value="item.userId"
            :label="item.username"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房源介绍">
        <el-input v-model="ruleForm.introduce" type="textarea" />
      </el-form-item>
      <el-button type="warning" @click="opensavehouse">添加房型</el-button>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!--添加房型对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="房型名称">
            <el-input v-model="form.acreage" />
          </el-form-item>
          <el-form-item label="面积">
            <el-input v-model="form.proportion" style="width: 50%" />平方米
          </el-form-item>
          <el-form-item label="朝向">
            <el-select v-model="form.direction" placeholder="公共装修情况">
              <el-option label="东" value="0" />
              <el-option label="南" value="1" />
              <el-option label="西" value="2" />
              <el-option label="北" value="3" />
              <el-option label="东南" value="4" />
              <el-option label="西北" value="5" />
              <el-option label="东北" value="6" />
              <el-option label="西南" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="独立配套">
            <el-checkbox-group v-model="form.duiliids">
              <el-checkbox
                v-for="item in priids"
                :key="item.id"
                :label="item.id"
                :value="item.id"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="租金">
            <el-input v-model="form.rental" style="width: 50%" />元/月
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              action="http://localhost:8200/hou/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview1"
              :on-success="handleAvatarSuccess1"
              :on-remove="handleRemove1"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-input v-model="form.imageUrl" hidden />
          </el-form-item>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveroominfo">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'InputConcentrated',
  data: function() {
    return {
      premises: [],
      form: {
        acreage:'',
        proportion:'',
        direction:'',
        rental:'',
        duiliids: [],
        imageUrl: [],
      },
      // 独立设施
      priids: [],
      dialogVisible: false,
      // 公共设施
      pubss: [],
      // 管理者
      user: [],
      // 根据输入匹配输入框内容
      restaurants: [],
      ruleForm: {
        imageUrl: [],
        ggids: [],
        tbHouseStyleDtos: []
      },
      rules: {
        flatName: [{ required: true, message: '输入公寓名称', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loadAll()
    this.getuser()
    this.getpublist()
    this.getprilist()
  },
  methods: {
    handleRemove1(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview1(file) {
      console.log(file)
    }, handleAvatarSuccess1(res) {
      // eslint-disable-next-line eqeqeq
      if (res.code == '500') {
        this.$message({
          message: res.msg,
          type: 'error'
        })
        return
      }
      this.form.imageUrl.push(res.obj)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file)
    }, handleAvatarSuccess(res) {
      // eslint-disable-next-line eqeqeq
      if (res.code == '500') {
        this.$message({
          message: res.msg,
          type: 'error'
        })
        return
      }
      this.ruleForm.imageUrl.push(res.obj)
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 查询楼盘表
    loadAll() {
      axios.post('http://localhost:8200/hou/TbPremisesInfoController/list').then((resp) => {
        this.premises = resp.data;
        console.log(JSON.stringify(resp.data))
      })
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert(JSON.stringify(this.ruleForm))
          axios.post('http://localhost:8200/hou/TbHouseInfoController/savehouseinfo', this.ruleForm).then((resp) => {
            // eslint-disable-next-line eqeqeq
            // alert(JSON.stringify(resp))
            // eslint-disable-next-line eqeqeq
            if (resp.data.code == 200) {
              this.$message({
                message: resp.data.msg,
                type: 'success'
              })
              location.reload()
            } else {
              alert('失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getuser() {
      axios.post('http://localhost:8200/sys/user/selall').then((resp) => {
        console.log(resp)
        this.user = resp.data.obj
      })
    },
    // 独立公共设施获取
    getpublist() {
      axios.post('http://localhost:8200/hou/TbPublicFacilityController/publiList').then((resp) => {
        // alert(JSON.stringify(resp))
        this.pubss = resp.data
      })
    },
    getprilist() {
      axios.post('http://localhost:8200/hou/TbPrivateFacilityController/prilist').then((resp) => {
        this.priids = resp.data
      })
    },
    opensavehouse() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    saveroominfo() {
      this.ruleForm.tbHouseStyleDtos.push({acreage: this.form.acreage, proportion: this.form.proportion, direction: this.form.direction, rental: this.form.rental, duiliids: this.form.duiliids, imageUrl: this.ruleForm.imageUrl })
      this.form={ duiliids: [],
        imageUrl: [],},
      this.dialogVisible=false;
    },
    opengotoloupan() {
      this.$router.push('/wish/propertyManagement/fensan/realEstate/realEstateInput')
    }
  }

}
</script>

<style scoped>

</style>

